/**
 * 课程列表
 */
<template>
    <vp-main-page @refresh="loadDataList">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList" label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="bh">
							<template #label><vp-label zh="课程编号" en="Course No."/></template>
							<el-input v-model="searchForm.bh" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="mc">
							<template #label><vp-label zh="课程名称" en="Course Name"/></template>
							<el-input v-model="searchForm.mc" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="ztList">
							<template #label><vp-label zh="状态" en="Status"/></template>
							<el-select class="w100" v-model="searchForm.ztList" placeholder="请选择/Please Choose" multiple collapse-tags>
								<el-option :value="10" label="草稿 Draft"></el-option>
								<el-option :value="89" label="生效/Effect"></el-option>
								<el-option :value="98" label="作废 Invalid"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="fxbs">
							<template #label><vp-label zh="是否复训" en="Retrain" /></template>
							<el-select class="w100" v-model="searchForm.fxbs" placeholder="请选择/Please Choose" clearable>
								<el-option :value="10" label="是/Yes"></el-option>
								<el-option :value="20" label="否/No"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList"/>
						<vp-btn-reset @click="handleSearchReset"/>
						<vp-btn-more @change="showMore = $event"/>
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			<vp-btn-add v-auth="'trainingCourse.edit'"  @click="handleAdd"/>
			<vp-btn-import v-auth="'trainingCourse.import'"  @click="handleImport"/>
			<vp-btn-export v-auth="'trainingCourse.export'"  @click="handleExport"/>
		</template>
		<template #table>
			<vp-vxe-table ref="tableRef" :data="tableData" @sort-change="handleSortChange" row-key="id" v-loading="loading">
				<vxe-column type="seq" align="center" title="#" width="50" />
				<vxe-column prop="zt" width="110" show-overflow >
					<template #header><vp-label zh="状态" en="Status"/></template>
					<template #default="scope">
						{{scope.row.zt === 10? '草稿 Draft' : scope.row.zt=== 89 ? '生效/Effect' :
						scope.row.zt=== 98 ? '作废 Invalid'  : '' }}
					</template>
				</vxe-column>
				<vxe-column prop="bh" :min-width="120" show-overflow >
					<template #header><vp-label zh="课程编号" en="Course No."/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.bh, scope.row.bh)"/>
					</template>
				</vxe-column>
				<vxe-column prop="mc" show-overflow :min-width="540">
					<template #header><vp-label zh="课程名称" en="Course Name"/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.mc, (scope.row.mcZw||'') + ' ' + (scope.row.mcYw||''))"/>
					</template>
				</vxe-column>
				<vxe-column field="acTypes" show-overflow :min-width="180">
					<template #header><vp-label zh="适用机型" en="A/C Type"/></template>
					<template #default="scope">
						<span v-for="(item, index) in scope.row.acTypes" :key="index">
							<el-tag> {{ item.jx }} </el-tag>&nbsp;
						</span>
					</template>
				</vxe-column>
				<vxe-column field="kclb" show-overflow :min-width="140">
					<template #header><vp-label zh="课程类别" en="Course Category"/></template>
				</vxe-column>
				<vxe-column field="ks" show-overflow :min-width="120">
					<template #header><vp-label zh="课时" en="HRS"/></template>
					<template #default="scope" >
						{{ scope.row.ks || scope.row.ks == 0 ? scope.row.ks + 'HRS' :'' }}
					</template>
				</vxe-column>
				<vxe-column field="pxxs" show-overflow :min-width="120">
					<template #header><vp-label zh="培训形式" en="Train Format"/></template>
				</vxe-column>
				<vxe-column field="ksxs" show-overflow :min-width="120">
					<template #header><vp-label zh="考试形式" en="Exam. Format"/></template>
				</vxe-column>
				<vxe-column field="fxbs" show-overflow width="100">
					<template #header><vp-label zh="是否复训" en="Retrain"/></template>
					<template #default="scope">
						<el-tag v-if="scope.row.fxbs==10">是/Yes</el-tag>
						<el-tag v-else >否/No</el-tag>
					</template>
				</vxe-column>
				<vxe-column field="zqz" show-overflow :min-width="120">
					<template #header><vp-label zh="复训周期" en="Retrain Cycle"/></template>
					<template #default="scope">
						<span v-if="scope.row.zqz">
							{{ ((scope.row.zqz || '') + (scope.row.zqdw == 12 ? 'M' : scope.row.zqdw == 11 ? 'D' : '') )}}
						</span>
					</template>
				</vxe-column>
				<vxe-column field="fxpxxs" show-overflow :min-width="150">
					<template #header><vp-label zh="复训培训形式" en="Retrain Train Format"/></template>
				</vxe-column>
				<vxe-column field="fxksxs" show-overflow :min-width="150">
					<template #header><vp-label zh="复训考试形式" en="Retrain Exam. Format"/></template>
				</vxe-column>
				<vxe-column :label="$t('item.operations')" fixed="right"  width="150">
					<template #header>
						<vp-label-operations/>
					</template>
					<template #default="scope">
						<el-space>
							<vp-btn-view text  @click="handleView(scope.row)"></vp-btn-view>
							<vp-btn-edit v-if="scope.row.zt == 10" text v-auth="'trainingCourse.edit'" @click="handleEdit(scope.row)"/>
							<vp-btn type="primary" text v-if="scope.row.zt == 89" @click="handleRevision(scope.row)"><vp-label zh="修订" en="Revise" /></vp-btn>
							<vp-btn-discard v-if="scope.row.zt == 89" text v-auth="'trainingCourse.edit'" @click="handleEnd(scope.row)"/>
							<vp-btn-del v-if="scope.row.zt == 10" text v-auth="'trainingCourse.edit'" @click="handleDelete(scope.row)"/>
						</el-space>
					</template>
				</vxe-column>
			</vp-vxe-table>
		</template>
		<template #pagination>
			<vp-pagination
				@change="loadDataList"
				:total="page.total" 
				v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize"
			>
			</vp-pagination>
		</template>
		<EditCourse ref="editCourseRef" @formSubmited="handleFormSubmited"></EditCourse>
	</vp-main-page>
</template>

<script setup lang="ts" name="trainingCourse">
import { ref, reactive, onMounted, defineAsyncComponent } from 'vue';
import request from '/@/utils/request';
import { markTextColor } from '/@/utils/toolsValidate';
import { ElMessage } from 'element-plus';
import { DEFAULT_PAGE } from '/@/utils/page';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import router from '/@/router';

const FilePopover = defineAsyncComponent(() => import('/@/components/vp/file/VpFilePopover.vue'));
const VpDictSelectMulit = defineAsyncComponent(() => import('/@/components/vp/dict/VpDictSelectMulit.vue'));
const EditCourse = defineAsyncComponent(() => import('./component/EditCourse.vue'));

	const searchForm = reactive({
		bh: "",
		mc: "",
		ztList: [10, 89],
		fxbs: null,
	});
	
	const page = reactive({
		...DEFAULT_PAGE,
	})

	const showMore = ref(false);
	const loading = ref(false);
	const tableData = ref([]);

	// 加载列表数据
	const loadDataList = () => {
		loading.value = true
		request.get('/training/course/pageList', {
			params: {
				...searchForm,
				...page,
			}
		}).then(res => {
			tableData.value = res?.data?.list || []
			page.total = res?.data?.total || 0
			page.pageNum = res?.data?.pageNum || 1
		}).finally(()=>{
			loading.value = false
		})
	}

	const searchFormRef = ref();

	// 重置搜索条件
	const handleSearchReset = ()=>{
		searchFormRef.value.resetFields();
		loadDataList()
	}

	// 列表字段排序
	const handleSortChange = (column: any)=>{
		page.sortColumn = column.prop;
		page.sortOrder = column.order == 'descending' ? 'desc': 'asc'
		loadDataList()
	}

	// 组件挂载后事件
	onMounted(() => {
		loadDataList()
	})

	const editCourseRef = ref();

	// 新增
	const handleAdd = ()=>{
		editCourseRef.value.handleOpen('add');
	}

	// 修改
	const handleEdit = (row: any)=>{
		editCourseRef.value.handleOpen('edit', row.id);
	}
	// 改版
	const handleRevision = (row: any) =>{
		editCourseRef.value.handleOpen('revision', row.id);
	}

	const handleView = (row: any) =>{
		router.push({
			name: "viewTrainingCourse",
			params: {
				id: row.id,
			},
		})
	}

	// 表单完成后回调事件
	const handleFormSubmited = (data: any)=>{
		loadDataList()
	}

	// 删除
	const handleDelete = (row: any)=>{
		VpMessageBox.confirmDelete().then(()=>{
			request.delete(`/training/course/${row.id}`).then(res => {
				loadDataList();
			})
		});
	}

	// 作废
	const handleEnd = (row: any)=>{
		VpMessageBox.confirmDiscard().then(()=>{
			request.delete(`/training/course/invalid/${row.id}`).then(res => {
				loadDataList();
			})
		});
	}

	// 导入
	const vpImportDialogRef = ref();
	const handleImport = () =>{
		ElMessage.info("功能开发中");
	}

	// 导出
	const handleExport = () => {
		ElMessage.info("功能开发中");
	}

	const tableRef = ref();

</script>

<style lang="scss" scoped>

</style>